.fixed{
  @include fixed-full();
}
.loading-wrap {
  @include flex-center();

  .loading {
    @include flex-center();
    width: 75px;
    height: 75px;
    border-radius: 6px;
    background-color: rgba(0, 0, 0, 0.1);
    position: relative;
    top: -35px;

    .box {
      width: 36px;
      height: 36px;
      position: relative;

      .line {
        width: 3px;
        height: 36px;
        position: absolute;
        left: 16.5px;
        top: 0;

        &::before,
        &::after {
          content: "";
          display: block;
          width: 3px;
          height: 10px;
          position: absolute;
          left: 0;
          background: white;
          border-radius: 50px;
        }

        &::before {
          top: 0;
        }

        &::after {
          bottom: 0;
        }

        @for $i from 1 through 6 {
          &:nth-child(#{$i}) {
            transform: rotate($i * 30deg);

            &::before {
              animation: opaci_ani 1.2s linear $i * 0.1 - 0.1s infinite;
            }

            &::after {
              animation: opaci_ani 1.2s linear $i * 0.1 + 0.5s infinite;
            }
          }
        }
      }
    }

    .box.black .line::before,
    .box.black .line::after {
      background: rgba(96, 96, 103, 0.6);
    }
  }
}

@keyframes opaci_ani {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
